/*
 * @Author: logic
 * @Date: 2021-04-12 20:02:18
 * @LastEditTime: 2021-04-14 21:39:57
 * @LastEditors: zy
 * @Description: 桑基图
 * @FilePath: \front\src\assets\js\Sankey.js
 */
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent
} from 'echarts/components'
import {
  SankeyChart
} from 'echarts/charts'
import {
  CanvasRenderer
} from 'echarts/renderers'

echarts.use(
  [TitleComponent, TooltipComponent, SankeyChart, CanvasRenderer]
)

export function render (divId, data) {
  let chartDom = document.getElementById(divId)
  let myChart = echarts.init(chartDom)
  let option = ''

  myChart.showLoading()

  myChart.hideLoading()

  myChart.setOption(option = {
    title: {
      text: 'Sankey Diagram'
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [{
      type: 'sankey',
      data: data.nodes,
      links: data.links,
      emphasis: {
        focus: 'adjacency'
      },
      levels: [{
        depth: 0,
        itemStyle: {
          color: '#fbb4ae'
        },
        lineStyle: {
          color: 'source',
          opacity: 0.6
        }
      }, {
        depth: 1,
        itemStyle: {
          color: '#b3cde3'
        },
        lineStyle: {
          color: 'source',
          opacity: 0.6
        }
      }, {
        depth: 2,
        itemStyle: {
          color: '#ccebc5'
        },
        lineStyle: {
          color: 'source',
          opacity: 0.6
        }
      }, {
        depth: 3,
        itemStyle: {
          color: '#decbe4'
        },
        lineStyle: {
          color: 'source',
          opacity: 0.6
        }
      }],
      lineStyle: {
        curveness: 0.5
      }
    }]
  })
  option && myChart.setOption(option)
}
